<style>
    .operator-mg{
        background:#FFFEE6;
        color:#8F5700;
        padding:12px;
    }
    .operator-mg-tip{
        width:16px;
        height:16px;
        margin-right:8px;
        float:left;
    }
</style>
<script type="text/javascript">
    function addGroup() {
        $('#service-group-input-account').removeAttr('disabled');
        $('#service-group-input-account').removeAttr('readonly');
        $('#service-group-dlg').dialog('open').dialog('setTitle', '添加客服组');
        $('#service-group-dlg-fm').form('clear');
        url = '<?php echo $this->config->item('base_url'); ?>service/addgroup';
    }
    function editGroup() {
        $('#service-group-input-account').attr('disabled', 'true');
        $('#service-group-input-account').attr('readonly', 'readonly');
        var row = $('#service-group-list').datagrid('getSelected');
        if (row) {
            $('#service-group-dlg').dialog('open').dialog('setTitle', '编辑客服组');
            row.pwd = null;
            $('#service-group-dlg-fm').form('load', row);
            url = '<?php echo $this->config->item('base_url'); ?>service/editgroup?id=' + row.id;
        } else {
            $.messager.confirm('错误', '请左击选中条目');
        }
    }
    function saveGroup() {
        $('#service-group-dlg-fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.errorMsg) {
                    $.messager.show({
                        title: '保存失败',
                        msg: result.errorMsg
                    });
                } else {
                    $('#service-group-dlg').dialog('close');
                    $('#service-group-list').datagrid('reload');
                }
            }
        });
    }
    function removeGroup() {
        var row = $('#service-group-list').datagrid('getSelected');
        if (row) {
            $.messager.confirm('提醒', '删除的客服组将无法恢复', function (r) {
                if (r) {
                    $.post('<?php echo $this->config->item('base_url'); ?>service/deletegroup', {id: row.id}, function (result) {
                        if (result) {
                            $('#service-group-list').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: '删除失败',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.confirm('提醒', '请左击选中删除条目');
        }
    }
    function serviceGroupSearch() {
        $('#service-group-list').datagrid('load', {
            account: $('#service-group-account').val(),
            name: $('#service-group-name').val(),
        });
    }
    function serviceGroupReset() {
        $('#service-group-account').val('');
        $('#service-group-name').val('');
    }
    //添加右击菜单内容
    function onRowMenuServiceGroup(e, rowIndex, rowData) {
        e.preventDefault();
        var selected = $("#service-group-list").datagrid('getRows'); //获取所有行集合对象
        selected[rowIndex].id; //index为当前右键行的索引，指向当前行对象
        $('#service-group-dlg_menu').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
</script>
<div class="operator-mg">
    <div class="operator-mg-tip icon-tip"></div>
    <div>温馨提示：在列表中点击右键可以弹出操作菜单</div>
</div>
<!--数据表格-->
<table id="service-group-list" class="easyui-datagrid" 
       url="<?php echo $this->config->item('base_url'); ?>service/getgroup"
       title="客服组管理" toolbar="#service-group-tb"
       rownumbers="true" pagination="true"
       singleSelect="true" fitColumns="true"
       data-options ="onRowContextMenu:onRowMenuServiceGroup">
    <thead>
        <tr>
            <th field="id" align="center" width="30">客服组ID</th>
            <th field="parentid" align="center" width="30">父级ID</th>
            <th field="levelid" align="center" width="40">层级ID</th>
            <th field="account" align="center" width="50">账号</th>
            <th field="name" align="center" width="40">名称</th>
            <th field="servicenum" align="center" width="30">客服人数</th>
            <th field="address" align="center" width="100">地址</th>
            <th field="tele" align="center" width="40">电话</th>
            <th field="builtaccount" align="center" width="50">创建管理员</th>
        </tr>
    </thead>
</table>
<!--工具栏及搜索框-->
<div id="service-group-tb" style="padding:10px;height:auto">
    <div>
        <a class="easyui-linkbutton" onclick="addGroup()" iconCls="icon-add" plain="true"></a>
        <a class="easyui-linkbutton" onclick="removeGroup()" iconCls="icon-remove" plain="true"></a>
        <a class="easyui-linkbutton" onclick="editGroup()" iconCls="icon-edit" plain="true"></a>
    </div>
    <div style="padding:10px">
        <label>客服组账户：</label><input id="service-group-account"  style="width:80px">
        <label>客服组名称：</label><input id="service-group-name" style="width:80px;">
        <br/><br/>
        <button onclick="serviceGroupSearch()">搜索</button>
        <button onclick="serviceGroupReset()">重置</button>
    </div>
</div>
<!--编辑弹框-->
<div id="service-group-dlg" class="easyui-dialog" style="width:auto;height:auto;padding:10px 20px"
     closed="true" buttons="#service-group-dlg-buttons">
    <form id="service-group-dlg-fm" method="post">
        <div class="fitem">
            <label>组账户:</label>
            <input id="service-group-input-account" name="account">
        </div>
        <div class="fitem">
            <label>父级:</label>
            <select id="service-manage-group" name="parentid" class="easyui-combotree" panelHeight="auto" style="width:150px;"
                    data-options="url:'<?php echo $this->config->item('base_url'); ?>service/getServiceGroupTree'">
            </select>
        </div>
        <div class="fitem">
            <label>名称:</label>
            <input id="service-group-input-name" name="name">
        </div>
        <div id="service-group-input-pwd" class="fitem">
            <label>地址:</label>
            <input name="address">
        </div>
        <div class="fitem">
            <label>电话:</label>
            <input name="tele">
        </div>
    </form>
</div>
<div id="service-group-dlg-buttons">
    <a class="easyui-linkbutton" iconCls="icon-ok" onclick="saveGroup()">保存</a>
    <a class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#service-group-dlg').dialog('close')">取消</a>
</div>
<!--右键菜单-->
<div id="service-group-dlg_menu" class="easyui-menu" style="width:120px;">
    <div onClick="editGroup()" data-options="iconCls:'icon-edit'">修改</div>
    <div onClick="addGroup()" data-options="iconCls:'icon-add'">添加</div>
    <div onClick="removeGroup()" data-options="iconCls:'icon-remove'">删除</div>
    <div class="menu-sep"></div>
    <div onClick="$('#service-group-list').datagrid('reload');" data-options="iconCls:'icon-reload'">刷新</div>
</div>
